<template>
  <div class="container" v-loading="loadingVisible">
    <div class="header">
      <div class="title-container">
        <span>
          <div class="title">
            <el-dropdown trigger="click" @command="handleCommand">
              <span class="el-dropdown-link channel-title">
                <strong>{{ channelGroup.groupName }}</strong>
                <svg id="dropdown-icon" t="1528208466548" viewBox="0 0 1024 1024" version="1.1"><path d="M517.688889 796.444444c-45.511111 0-85.333333-17.066667-119.466667-51.2L73.955556 381.155556c-22.755556-22.755556-17.066667-56.888889 5.688888-79.644445 22.755556-22.755556 56.888889-17.066667 79.644445 5.688889l329.955555 364.088889c5.688889 5.688889 17.066667 11.377778 28.444445 11.377778s22.755556-5.688889 34.133333-17.066667l312.888889-364.088889c22.755556-22.755556 56.888889-28.444444 79.644445-5.688889 22.755556 22.755556 28.444444 56.888889 5.688888 79.644445L637.155556 739.555556c-28.444444 39.822222-68.266667 56.888889-119.466667 56.888888 5.688889 0 0 0 0 0z" p-id="1094" fill="#111111"></path></svg>
                <svg id="dropdown-icon-selected" t="1528208466548" viewBox="0 0 1024 1024" version="1.1"><path d="M517.688889 796.444444c-45.511111 0-85.333333-17.066667-119.466667-51.2L73.955556 381.155556c-22.755556-22.755556-17.066667-56.888889 5.688888-79.644445 22.755556-22.755556 56.888889-17.066667 79.644445 5.688889l329.955555 364.088889c5.688889 5.688889 17.066667 11.377778 28.444445 11.377778s22.755556-5.688889 34.133333-17.066667l312.888889-364.088889c22.755556-22.755556 56.888889-28.444444 79.644445-5.688889 22.755556 22.755556 28.444444 56.888889 5.688888 79.644445L637.155556 739.555556c-28.444444 39.822222-68.266667 56.888889-119.466667 56.888888 5.688889 0 0 0 0 0z" p-id="1094" fill="#418FD6"></path></svg>
              </span>
              <el-dropdown-menu slot="dropdown">
                <template v-if="channelGroup.isPrichat !== '1'">
                  <template v-if="userInfo.userid">
                    <!--<el-dropdown-item command="addMember">添加成员</el-dropdown-item> -->
                    <el-dropdown-item command="manageMember">成员管理</el-dropdown-item>
                    <el-dropdown-item command="editName" divided>修改群名称</el-dropdown-item>
                    <el-dropdown-item command="remove" v-if="userInfo.userid === channelGroup.cuserid">删除群</el-dropdown-item>
                  </template>
                  <template v-else>
                    <el-dropdown-item command="editName">修改群名称</el-dropdown-item>
                  </template>
                  <el-dropdown-item command="leave" divided v-if="userInfo.userid !== channelGroup.cuserid">离开群</el-dropdown-item>
                </template>
                <template v-else>
                  <el-dropdown-item command="editName">修改群名称</el-dropdown-item>
                </template>
              </el-dropdown-menu>   
            </el-dropdown>        
            <div v-if="channelGroup.isPrichat === '1'">
              <status-online-icon v-if="channelGroup.toUserOnlineStatus === 'online'" :text="channelGroup.groupId === channelGroup.groupId ? '在线' : '在线 • ' + channelGroup.groupName?channelGroup.groupName:channelGroup.cusername"></status-online-icon>
              <status-away-icon v-else-if="channelGroup.toUserOnlineStatus === 'away'" text="离开"></status-away-icon>
              <status-offline-icon v-else-if="channelGroup.toUserOnlineStatus === 'offline'" text="离线"></status-offline-icon>
            </div> 
          </div>
        </span>
<!--         <edit-channel-group-title ref="editChannelTitleDlg" @onEditTitleFinished="onEditTitleFinished"></edit-channel-group-title> -->
             <edit-channel-group-name ref="editgroupNameDlg" @saveGroupName="onSaveGroupName"></edit-channel-group-name>
<!--         <add-member ref="addChannelMemberDlg" :group-id="channelGroup.groupId" :channel-name="channelGroup.groupName"></add-member> -->
<!--         <member-list ref="memberListDlg" :group-id="channelGroup.groupId" :channel-name="channelGroup.groupName"></member-list> -->
<!--         <member-management ref="memberManagementDlg" :group-id="channelGroup.groupId" :channel-name="channelGroup.groupName" @onOpenAddMemberDlg="doOpenAddMemberDlg"></member-management> -->
        <div v-if="channelGroup.isPrichat === '0'" class="members-container" @click="showEditChannelGroupDlg">
          <div class="members">
            <div>{{ channelGroup.users?channelGroup.users.length:'' }}</div>
            <svg width="14px" height="14px" viewBox="0 0 16 16"><g id="Symbols" stroke="none" stroke-width="1" fill="inherit" fill-rule="evenodd"><g id="Channel-Header/Web-HD" transform="translate(-725.000000, -32.000000)" fill-rule="nonzero" fill="inherit"><g id="Channel-Header"><g id="user-count" transform="translate(676.000000, 22.000000)"><path d="M64.9481342,24 C64.6981342,20.955 63.2551342,19.076 60.6731342,18.354 C61.4831342,17.466 61.9881342,16.296 61.9881342,15 C61.9881342,12.238 59.7501342,10 56.9881342,10 C54.2261342,10 51.9881342,12.238 51.9881342,15 C51.9881342,16.297 52.4941342,17.467 53.3031342,18.354 C50.7221342,19.076 49.2771342,20.955 49.0271342,24 C49.0161342,24.146 49.0061342,24.577 49.0001342,25.001 C48.9911342,25.553 49.4361342,26 49.9881342,26 L63.9881342,26 C64.5411342,26 64.9851342,25.553 64.9761342,25.001 C64.9701342,24.577 64.9601342,24.146 64.9481342,24 Z M56.9881342,12 C58.6421342,12 59.9881342,13.346 59.9881342,15 C59.9881342,16.654 58.6421342,18 56.9881342,18 C55.3341342,18 53.9881342,16.654 53.9881342,15 C53.9881342,13.346 55.3341342,12 56.9881342,12 Z M51.0321342,24 C51.2981342,21.174 52.7911342,20 55.9881342,20 L57.9881342,20 C61.1851342,20 62.6781342,21.174 62.9441342,24 L51.0321342,24 Z" id="User_4_x2C__Profile_5-Copy-9"></path></g></g></g></g></svg>
          </div>
        </div>
      </div>
    </div>
    <div class="body-container" v-if="$store.getters.imClient">
      <div class="body">
        <message-list ref="messageList" :group-id="channelGroup.groupId" :channel-group="channelGroup"></message-list>
      </div>
    </div>
    <div class="footer">
      <send-message ref="sendMessage" :group-id="channelGroup.groupId" :is-prichat="channelGroup.isPrichat" :to-userid="channelGroup.toUserid" :to-username="channelGroup.toUsername" :send-content="channelGroup.msgBody" @onMessageSent="onSentMessage"></send-message>
    </div>
    <el-dialog title="修改群" :visible.sync="editChannelGroupVisible"  width="70%"  :close-on-click-modal="false" append-to-body>
		  <edit-channel-group @leaveChannelGroup="onLeaveChannelGroup" @joinChannelGroup="onJoinChannelGroup" @saveGroupName="onSaveGroupName" :selected-channel-group="channelGroup" :visible="editChannelGroupVisible" @cancel="editChannelGroupVisible=false" @confirm="afterEditChannelGroupConfirm"></edit-channel-group>
	</el-dialog>
  </div>
</template>

<script>

import { queryGroupAndUsers } from '@/api/mdp/im/group/imGroup'
import StatusOnlineIcon from '../svg/statusOnlineIcon'
import StatusOfflineIcon from '../svg/statusOfflineIcon'
import StatusAwayIcon from '../svg/statusAwayIcon'
import MessageList from '../message/messageList'
import SendMessage from '../message/sendMessage'
import EditChannelGroup from '../channel/editChannelGroup'
import    EditChannelGroupTitle from '../channel/editChannelGroupName'
import    EditChannelGroupName from '../channel/editChannelGroupName'
import    AddMember from '../channel/addMember'
import    MemberList from '../channel/memberList'
import    MemberManagement from '../channel/manageMember'
import { mapGetters } from 'vuex' 

import seq from '@/common/js/sequence';//全局公共库

export default {
  props:['selectedChannelGroup'],
  computed: { 
    ...mapGetters([
      'userInfo','token','imClient'
    ]),
  },
  data() {
    return {
      
      editChannelGroupVisible: false,
      loadingVisible: false,
      channelGroup: {groupId:'',groupName:'',isPrichat:'',users:[],unreadMessages:[],cuserid:'',cusername:'',cheadimgurl:''},
      sentMessage: null,
      isAdmin: false,
      isPrichat:'0',//是否为私聊 0否，1是
      toUserid:'',//isPrichat=='1'时使用
    }
  },
  methods: {
    showSentMessage(message) {
      this.$refs.messageList.showSentMessage(message)
    },
    onSentMessage(message) {
      let imClient = this.$store.getters.imClient
      imClient.send(message);
      this.showSentMessage(message);
      //清空输入框的内容
      this.$refs.sendMessage.cheanMessage()
    },
    initPage() {
      if(!this.channelGroup.groupId) {
        return
      }
      this.initImClient() 
      
    },
    onMembersCountChanged(message) {
      if(this.selectedChannelGroup.groupId === message.groupId) {
        this.channelGroup.memberCount += message.count
      }
    },
    initImClient() {
      let st = setTimeout(() =>  {
        let imClient = this.$store.getters.imClient
        if(imClient != null) {
          imClient.bindMembersCountChanged(this.onMembersCountChanged)
          
          clearTimeout(st)
        }
      }, 500)
    },
    handleCommand(command) {
      switch(command) {
        case 'addMember':
          this.showEditChannelGroupDlg(); 
          break;        
        case 'editTitle':
          this.$refs.editgroupNameDlg.$emit('openDialog', this.channelGroup)          
          break;
        case 'editName':
          this.$refs.editgroupNameDlg.$emit('openDialog', this.channelGroup)          
          break;
        case 'manageMember':
          this.showEditChannelGroupDlg();         
          break
        case 'leave':
          this.doLeaveChannel(this.channelGroup)
          break
        case 'remove':
          this.doRemoveChannel(this.channelGroup)
          break
      }
    }, 
    onLeaveChannelGroup(groupUsers){
      let imClient = this.$store.getters.imClient
      groupUsers.action='leaveChannelGroup'
      groupUsers.msgType='group'
      imClient.send(groupUsers); 
    },
    onJoinChannelGroup(groupUsers){ 
      let imClient = this.$store.getters.imClient
      groupUsers.action='joinChannelGroup'
      groupUsers.msgType='group'
      imClient.send(groupUsers); 
    },
    onChannelGroupNameChanged(group){ 
      let imClient = this.$store.getters.imClient 
      group.action='channelGroupNameChanged'
      group.msgType='group'
      imClient.send(group); 
    },
    doOpenAddMemberDlg() {
      this.$refs.addChannelMemberDlg.$emit('openDialog', this.channelGroup)
    },
    doLeaveChannel(group) {
      this.$confirm('确定离开该群吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
         type: 'warning'
      }).then(_ => {
        this.loadingVisible = true
        let currentUser = this.userInfo 
        var date=new Date(); 
        var message={
          msgId:seq.sn(),
          groupId:group.groupId,
          groupName:group.groupName,
          action:"leaveChannelGroup",
          msgType:"group",
          sendTime:date.getTime(),
          sendUserid:this.userInfo.userid,
          sendUsername:this.userInfo.username,
          users:[{userid:this.userInfo.userid,username:this.userInfo.username}]
        }
        this.$store.getters.imClient.send(message);
        this.loadingVisible = false
      }).catch(_ => {
        this.loadingVisible = false
      })
    },
    doRemoveChannel(group) {
      this.$confirm('确定删除该群吗？删除后将无法浏览该群的任何消息！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
         type: 'warning'
      }).then(_ => {
        this.loadingVisible = true
        let currentUser = this.userInfo 
        var date=new Date(); 
        var message={
          msgId:seq.sn(),
          groupId:group.groupId,
          groupName:group.groupName,
          action:"channelGroupRemove",
          msgType:"group",
          sendTime:date.getTime(),
          sendUserid:this.userInfo.userid,
          sendUsername:this.userInfo.username
        }
        this.$store.getters.imClient.send(message);
        this.loadingVisible = false
      }).catch(_ => {
        this.loadingVisible = false
      })      
    },
    onEditTitleFinished(newTitle) {
      this.channelGroup.groupName = newTitle
    },
    onSaveGroupName(group) {
      var date=new Date();
      this.channelGroup.groupName = group.groupName
      var message={
        msgId:seq.sn(),
        groupId:group.groupId,
        groupName:group.groupName,
        action:"channelGroupNameChanged",
        msgType:"group",
        sendTime:date.getTime(),
        sendUserid:this.userInfo.userid,
        sendUsername:this.userInfo.username
      }
      this.$store.getters.imClient.send(message);
    },
    showMemberList() {
      this.$refs.memberListDlg.$emit('openDialog')
    },
    showEditChannelGroupDlg(){
        this.editChannelGroupVisible=true;
    
    },
    afterEditChannelGroupConfirm(channelGroup){
      this.editChannelGroupVisible=false
      this.channelGroup=channelGroup;
    }
  },
  created() {
    //debugger
    if(this.selectedChannelGroup){
      this.channelGroup=Object.assign(this.channelGroup,this.selectedChannelGroup)
      this.initPage()
    }
    
  },
  watch: { 
     'selectedChannelGroup':function(selectedChannelGroup){
       //debugger
       console.log("好玩吗")
        if(!selectedChannelGroup){
         return;
       }
       this.channelGroup=Object.assign({},this.channelGroup,this.selectedChannelGroup)
       if(this.channelGroup.toUserid==this.userInfo.userid){   //如果是私聊,如果发送者是自己,就重新设置发送者
          this.channelGroup.toUserid=this.channelGroup.sendUserid
       }
       this.initPage()
     }, 
  },
  components: { StatusOnlineIcon, StatusOfflineIcon, StatusAwayIcon, MessageList, SendMessage,
    EditChannelGroupTitle,
    EditChannelGroupName,
    AddMember,
    MemberList,
    MemberManagement,
    EditChannelGroup
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  background: #fff;
  height: 100%;
  width: 100%;
  position: relative;

  .header {
    -webkit-flex: 0 0 69px;
    flex: 0 0 69px;
    border-bottom: 1px solid;
    font-size: 14px;
    position: relative;
    width: 100%;
    z-index: 9;
    border-bottom: solid 1px #DBD9D6;

    .title-container {
      min-width: 0px;
      flex: 1 1 0%;
      margin-top: 14px;
      padding-left: 8px;
      vertical-align: middle;
      span {
        background: transparent;
        border: none;
        padding: 0;
        text-align: left;
        cursor: pointer;
      }
      .title {
        font-size: 17px;
        flex: 1;
        min-width: 0;
        padding: 0 0 0 10px;
        float: left;
        strong {
          font-size: 17px;
        }
        svg {
          margin: 0 0 0 3px;
          width: 13px;
          height: 13px;
        }
        #dropdown-icon-selected {
          display: none;
        }
        .channel-title:hover {
          color: #418FD6;
          #dropdown-icon {
            display: none;
          }
          #dropdown-icon-selected {
            display: inline;
          }
        }
      }
      .display-name {
        margin-top: 3px;
        font-size: 14px;
      }
      .members-container {
        float: right;
        padding: 0 50px 0 0;
        .members {
          border-radius: 20px;
          margin-top: 5px;
          padding: 6px 23px;
          border: 1px solid #dcdfe6;
          vertical-align: middle;
          div {
            float: left;
            margin-right: 6px;
            font-weight: bold;
            color: #B7B3AD;
          }
          svg {
            width: 16px;
            height: 16px;
            margin-top: 1px;
            fill: #B7B3AD;
          }
        }
        .members:hover {
          cursor: pointer;
          border: 1px solid #319EDD;
          div {
            color: #319EDD;
          }
          svg {
            fill: rgb(35, 137, 215);
          }
        }        
      }
    }     
  }

  .body-container {
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    .body {
      -webkit-overflow-scrolling: touch;
      height: 100%;
      width: 100%;
      overflow-y: hidden;
      overflow-x: hidden;
      position: absolute;   
    }
  }

  .footer {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-top: 20px;
    height: 156px;
    width: 100%;
    z-index: 5;
  }
}
</style>

